نحوه ایجاد یک افزونه ویجت برای وردپرس

WordPress یک سیستم مدیریت محتوا شگفت انگیز با بسیاری از ویژگی های عالی مانند ویجت ها است. در این آموزش، قصد دارم به شما توضیح دهم که چگونه ویجت های خود را در یک پلاگین کوچک ایجاد کنید. این پست چند نکته اضافی را پوشش می دهد که باید قبل از ایجاد خود ویجت بدانید. به اینجا رسیدیم!

مرحله 1: افزونه ویجت خود را ایجاد کنید

من اخیراً افزونه ای به نام “Freelancer Widgets Bundle” ایجاد کردم و برخی از افراد از من پرسیدند که چگونه چنین افزونه ای ایجاد کنم، بنابراین تصمیم گرفتم این پست را بنویسم. مرحله اول ایجاد افزونه است. و همانطور که خواهید دید، این سخت ترین قسمت نیست. یک افزونه کد اضافی است که پس از فعال سازی به وردپرس اضافه می شود. وردپرس یک حلقه از طریق یک پوشه ایجاد می کند تا همه افزونه های موجود را بازیابی کند و آنها را در دفتر پشتی فهرست کند. برای ایجاد افزونه خود، به یک ویرایشگر مانند Coda (Mac) یا Dreamweaver (PC و Mac) نیاز دارید. من به شما توصیه می کنم که افزونه خود را در یک نصب محلی وردپرس ایجاد کنید، ساخت آن در سرور زنده می تواند در صورت بروز خطا باعث ایجاد مشکلاتی شود. پس لطفاً قبل از قرار دادن هاست خود روی آن، منتظر بمانید تا افزونه ما را آزمایش کنید.

اکنون پوشه wp-content/plugins را باز کنید. در اینجا می خواهید افزونه خود را اضافه کنید. یک دایرکتوری جدید ایجاد کنید و آن را “ویجت-پلاگین” بنامید (در واقع، این نام می تواند هر چیزی باشد که شما می خواهید). حتی اگر افزونه ما فقط یک فایل واحد داشته باشد، همیشه بهتر است برای هر افزونه از یک پوشه استفاده کنید. در دایرکتوری خود، یک فایل جدید به نام “widget-plugin.php” ایجاد کنید (این نام نیز قابل تغییر است) و آن را باز کنید. اکنون می خواهیم اولین خطوط کد خود را اضافه کنیم. تعریف یک افزونه در وردپرس از قوانینی پیروی می کند که می توانید آنها را بخوانید اینجا در کدکس. وردپرس چگونه یک افزونه را تعریف می کند:

بنابراین، ما باید این کد را تغییر دهیم تا متناسب با نیازهای ما باشد:

فایل خود را ذخیره کنید. فقط با افزودن کد به فایل widget-plugin.php ما یک پلاگین ایجاد کرده ایم! خوب، در حال حاضر این افزونه کاری انجام نمی دهد، اما وردپرس آن را تشخیص می دهد. برای اطمینان از این موضوع، به مدیریت خود بروید و به منوی «Plugins» بروید. اگر افزونه شما در لیست افزونه ها ظاهر می شود، خوب هستید، در غیر این صورت مطمئن شوید که دستورالعمل های من را دنبال کرده و دوباره امتحان کنید. اکنون می توانید افزونه را فعال کنید.

مرحله 2: ویجت را ایجاد کنید

اکنون قصد داریم خود ویجت را ایجاد کنیم. این ویجت یک کلاس PHP خواهد بود که کلاس اصلی وردپرس را گسترش می‌دهد WP_Widget< /a>. اساسا، ویجت ما به این صورت تعریف می شود:

// کلاس ویجت
کلاس My_Custom_Widget WP_Widget {

	// سازنده اصلی
	تابع عمومی __construct() {
		/* ... */
	}

	// فرم ویجت (برای باطن)
	فرم تابع عمومی ($instance ) {	
		/* ... */
	}

	// تنظیمات ویجت را به روز کنید
	به‌روزرسانی عملکرد عمومی ($new_instance، $old_instance) {
		/* ... */
	}

	// ویجت را نمایش دهید
	ویجت تابع عمومی ($args, $instance ) {
		/* ... */
	}

}

// ویجت را ثبت کنید
تابع my_register_custom_widget() {
	register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'my_register_custom_widget' );

این کد تمام اطلاعاتی را که سیستم برای استفاده از ویجت نیاز دارد به وردپرس می دهد:

1. سازنده، برای شروع ویجت
2.  تابع ()form برای ایجاد فرم ویجت در مدیریت
3. عملکرد update()، برای ذخیره داده‌های ویجت در طول نسخه
4. و تابع ویجت() برای نمایش محتوای ویجت در قسمت جلو

1 – سازنده

سازنده بخشی از کد است که نام ویجت و آرگومان های اصلی را تعریف می کند، در زیر نمونه ای از شکل ظاهری آن آمده است.

// سازنده اصلی
تابع عمومی __construct() {
	والد::__construct(
		'ویجت_سفارشی_من'،
		__( «ویجت سفارشی من»، «دامنه_متن»)،
		آرایه(
			'customize_selective_refresh' => درست است،
		)
	)
}

لطفاً از __() در اطراف نام ویجت استفاده نکنید، وردپرس از این تابع برای ترجمه استفاده می کند. من واقعاً به شما توصیه می‌کنم همیشه از این توابع استفاده کنید، تا طرح زمینه خود را کاملاً قابل ترجمه کنید. و استفاده از پارامتر “customize_selective_refresh” به ویجت اجازه می‌دهد تا هنگام ویرایش ویجت در زیر ظاهر > سفارشی‌سازی به‌روزرسانی شود، بنابراین به جای بازخوانی کل صفحه، تنها ویجت هنگام ایجاد تغییرات به‌روزرسانی می‌شود.

2 – تابع form()

این تابع تنظیمات فرم ویجت را در قسمت مدیریت وردپرس ایجاد می‌کند (یا در قسمت Appearance > Widgets یا Appearance > Customize > Widgets). این زمانی است که داده های خود را وارد می کنید تا در وب سایت نمایش داده شود. بنابراین من توضیح خواهم داد که چگونه می توانید فیلدهای متنی، مناطق متنی، کادرهای انتخابی و چک باکس ها را به تنظیمات فرم ویجت خود اضافه کنید.

// فرم ویجت (برای باطن )
فرم تابع عمومی ($instance ) {

	// تنظیمات پیش فرض ویجت
	$defaults = آرایه(
		'title' => ''،
		'text' => ''،
		'textarea' => ''،
		'checkbox' => '',
		'انتخاب' => ''،
	)
	
	// تنظیمات فعلی را با پیش فرض ها تجزیه کنید
	extract( wp_parse_args( ( آرایه ) $instance, $defaults ) ); ?>

	
	

		
		);
	

	
	

		
		

	
	

		
		<?php echo wp_kses_post( $textarea ); ?>
	

	
	

		 />
		
	

	
	

		
		
		 __( 'انتخاب'، 'متن_دامنه')،
			'option_1' => __( 'گزینه 1'، 'text_domain')،
			'option_2' => __( 'گزینه 2'، 'text_domain')،
			'option_3' => __( 'گزینه 3'، 'text_domain')،
		)

		// بین گزینه ها حلقه بزنید و هر کدام را به منوی انتخاب اضافه کنید
		foreach ( $options به عنوان $key => $name ) {
			echo ''. $name . '';

		} ?>
		
	

این کد به سادگی 5 فیلد را به ویجت اضافه می کند (عنوان، متن، ناحیه متن، انتخاب و چک باکس). بنابراین ابتدا پیش‌فرض‌ها را برای ویجت خود تعریف می‌کنید، سپس تابع بعدی تنظیمات فعلی تعریف‌شده/ذخیره‌شده برای ویجت شما را با پیش‌فرض‌ها تجزیه می‌کند (بنابراین تنظیماتی که وجود ندارند به حالت پیش‌فرض برمی‌گردند، مانند زمانی که برای اولین بار ویجت را اضافه می‌کنید. نوار کناری شما). و آخرین html برای هر فیلد است. به استفاده از ()esc_attr هنگام اضافه کردن فیلدهای فرم توجه کنید، این کار به دلایل امنیتی انجام می شود. هر زمان که یک متغیر تعریف شده توسط کاربر را در سایت خود تکرار می کنید، باید مطمئن شوید که ابتدا آن را پاکسازی کرده است.

3 –  عملکرد update()

عملکرد update() واقعاً ساده است. از آنجایی که توسعه دهندگان هسته وردپرس یک API ابزارک واقعا قدرتمند اضافه کردند، ما فقط باید این کد را برای به روز رسانی هر فیلد اضافه کنیم:

// تنظیمات ویجت را به‌روزرسانی کنید
به‌روزرسانی عملکرد عمومی ($new_instance، $old_instance) {
	$instance = $old_instance;
	$instance['title'] = isset( $new_instance['title'] ) ? wp_strip_all_tags( $new_instance['title'] ): '';
	$instance['text'] = isset( $new_instance['text'] ) ? wp_strip_all_tags( $new_instance['text'] ): '';
	$instance['textarea'] = isset( $new_instance['textarea'] ) ? wp_kses_post( $new_instance['textarea'] ): '';
	$instance['checkbox'] = isset( $new_instance['checkbox'] ) ? 1: نادرست؛
	$instance['select'] = isset( $new_instance['select'] ) ? wp_strip_all_tags( $new_instance['select'] ): '';
	بازگشت $instance;
}

همانطور که می بینید تنها کاری که باید انجام دهیم این است که هر تنظیمات را بررسی کنیم و اگر خالی نیست آن را در پایگاه داده ذخیره کنیم. به استفاده از توابع ()wp_strip_all_tags و wp_kses_post() توجه کنید، اینها برای پاکسازی داده ها قبل از اضافه شدن به پایگاه داده استفاده می شوند. هر زمان که محتوای ارسالی هر کاربر را در پایگاه داده وارد می‌کنید، باید مطمئن شوید که کد مخربی ندارد. اولین تابع wp_strip_all_tags همه چیز را به جز متن اصلی حذف می‌کند، بنابراین می‌توانید از آن برای هر فیلدی که مقدار پایانی آن یک رشته است استفاده کنید و تابع دوم ()wp_kses_post همان تابعی است که برای محتوای پست استفاده می‌شود و همه برچسب‌ها را به غیر از لینک‌های اصلی html حذف می‌کند. ، دهانه ها، div ها، تصاویر و غیره

4 –  عملکرد ویجت()

تابع ویجت () یکی از محتوای موجود در وب سایت است. این چیزی است که بازدیدکنندگان شما خواهند دید. این تابع را می توان طوری تنظیم کرد که شامل کلاس های CSS و برچسب های خاص باشد تا کاملاً با نمایش تم شما مطابقت داشته باشد. این کد است (لطفاً این کد را نمی توان به راحتی تغییر داد تا متناسب با نیاز شما باشد):

// نمایش ویجت
ویجت تابع عمومی ($args، $instance) {

	استخراج ($args );

	// گزینه های ویجت را بررسی کنید
	$title = isset( $instance['title'] ) ? apply_filters( 'widget_title', $instance['title'] ) : '';
	$text = isset( $instance['text'] ) ? $instance['text'] : '';
	$textarea = isset( $instance['textarea'] ) ?$instance['textarea'] : '';
	$select = isset( $instance['sect'] ) ? $instance['select'] : '';
	$checkbox = ! خالی ($instance['checkbox'] ) ? $instance['checkbox'] : false;

	// هسته وردپرس قبل از ابزارک هوک (همیشه شامل )
	echo $before_widget;

   // ویجت را نمایش دهید
   echo '
';

		// در صورت تعریف، عنوان ویجت را نمایش دهید
		if ($title ) {
			echo $before_title . $title. $after_title;
		}

		// نمایش فیلد متنی
		if ($text ) {
			پژواک '
' . $text . '
';
		}

		// نمایش فیلد ناحیه متنی
		if ($textarea ) {
			پژواک '
' . $textarea. '
';
		}

		// نمایش فیلد انتخاب
		if ($select ) {
			پژواک '
' . $انتخاب کنید. '
';
		}

		// اگر چک باکس درست باشد چیزی را نمایش دهید
		if ($checkbox ) {
			echo '
چیزی عالی
';
		}

	پژواک '
';

	// قلاب after_widget هسته وردپرس (همیشه شامل )
	echo $after_widget;

}

این کد پیچیده نیست، تنها چیزی که باید به خاطر بسپارید این است که بررسی کنید آیا متغیری تنظیم شده است یا خیر، اگر تنظیم نکرده اید و اگر می خواهید آن را چاپ کنید، یک پیام خطا دریافت خواهید کرد.

کد افزونه ویجت کامل

اکنون اگر به درستی پلاگین شما را دنبال کرده اید اکنون باید کاملاً کاربردی باشد و می توانید آن را مطابق با نیازهای خود سفارشی کنید. اگر راهنما را دنبال نکرده‌اید یا می‌خواهید کد را دوباره بررسی کنید، می‌توانید برای مشاهده کد کامل به صفحه Github مراجعه کنید.

مشاهده کد کامل در Github

نتیجه گیری

ما دیدیم که ایجاد یک ویجت در داخل یک افزونه بسیار جالب است، اکنون باید بدانید که چگونه یک افزونه ساده حاوی ویجت با انواع فیلدهای مختلف ایجاد کنید و یاد گرفتید که چگونه با استفاده از تکنیک های پیشرفته برای سفارشی کردن ویجت کمی جلوتر بروید. تبریک می گویم، شما کار شگفت انگیزی انجام دادید!